<template>
  <div class="custom_tabbar" v-if="item.data">
    <van-tabbar v-model="active">
      <van-tabbar-item
        v-for="(item, index) in item.data"
        :key="'tabbar_index_' + index"
        :name="item.router"
      >
        <router-link :to="{ name: item.router }">
          <van-icon
            :name="item.icon"
            :class="item.router === $route.name && 'on'"
          ></van-icon>
          <span>{{ $t("lang." + item.title) }}</span>
        </router-link>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  name: "tabbar",
  props: {
    item: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      active: "home",
    };
  },
  created() {
    //this.findActive();
    this.active = this.$route.name;
  },
  mounted() {
    console.log(this.$route);
  },
  watch: {
    "$props.item"() {
      //this.findActive();
    },
  },
  methods: {
    findActive() {
      let data =
          !this.$Plugins.isEmptyObject(this.$props.item) &&
          this.$props.item.data,
        len = data.length || 0;
      for (let i = 0; i < len; i++) {
        if (data[i].name === this.$route.name) {
          this.active = i;
          break;
        }
      }
    },
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.custom_tabbar {
  box-shadow: 0 2px 12px rgba(100, 101, 102, 0.12);
  .van-tabbar-item__text {
    a {
      display: block;
      .van-icon {
        display: block;
        font-size: (26 / @base);
        &.on {
          color: #ff6701;
        }
      }
      span {
        display: block;
        padding: (5 / @base) 0;
      }
    }
  }
}
</style>
